<template>
  <view style="width:100%;height:300px;">
    <qiun-data-charts
      type="column"
      :chartData="chartData"
      :opts="opts"
      :canvas2d="true"
      :animation="true"
    />
  </view>
</template>
<script>
import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
export default {
  components: { QiunDataCharts },
  props: ['refreshKey'],
  data() {
    return {
      chartData: { categories: [], series: [] },
      opts: {}
    }
  },
  watch: {
    refreshKey() { this.genData() }
  },
  mounted() { this.genData() },
  methods: {
    genData() {
      this.chartData = {
        categories: ['一月', '二月', '三月', '四月', '五月'],
        series: [
          { name: 'A', data: [10, 20, 15, 35, 25] },
          { name: 'B', data: [20, 10, 30, 20, 40] }
        ]
      }
      this.opts = {
        extra: {
          column: {
            width: 15 // 这里设置为一半宽度，实际宽度会根据图表宽度自适应
          }
        }
      }
    }
  }
}
</script> 